<template>
  <div class="w1200 hospital_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}</el-breadcrumb-item> -->
        <el-breadcrumb-item
          ><nuxt-link to="/doctor"
            >{{ $cookies.get("city") || "全国" }}医生</nuxt-link
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ oInfo.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 基础信息 开始 -->
    <div class="base_info">
      <!-- 医生头像 开始 -->
      <div class="doctor_avatar">
        <li-image :src="oInfo.photo" class="img" v-if="oInfo.photo" />
        <img
          src="@/assets/images/avatar/doctor_default.png"
          class="img"
          alt=""
          v-else
        />
      </div>
      <!-- 医生头像 end -->

      <!-- 文字信息 开始 -->
      <div class="text_info">
        <div class="top">
          <!-- 标题 开始 -->
          <div class="title">
            <div class="name">
              <span>{{ oInfo.name }}</span>
              <img
                src="@/assets/images/rz.png"
                class="rz"
                alt=""
                v-if="oInfo.hasCertified == 1"
              />
            </div>
            <div
              class="attention"
              :class="oInfo.followedStatus == 1 ? 'attentioned' : ''"
              @click="attention"
            >
              <img
                src="@/assets/images/focus.png"
                class="img"
                alt="关注"
                v-if="oInfo.followedStatus == 2"
              />
              <span>{{ oInfo.followedStatus == 2 ? "关注" : "已关注" }}</span>
            </div>
          </div>
          <!-- 标题 end -->
          <!-- 标签、评分、评价 开始 -->
          <div class="label_score">
            <div class="score_box">
              <div class="score">
                <!-- <el-rate v-model="oInfo.initScore" class="li_rate" disabled allow-half></el-rate> -->
                <li-rate v-model="oInfo.initScore" disabled></li-rate>
              </div>
              <div class="review">{{ commentsList.length }}条评价</div>
            </div>
          </div>
          <!-- 标签、评分、评价 end -->

          <!-- 预约、点评、医生人数 开始 -->
          <div class="person_box">
            <img src="@/assets/images/smile.png" class="img" alt="" />
            <span class="num">{{ $fomartRate(totalScore.scoreOverall) }}</span>
            <span class="line">/</span>
            <span>从业年限</span>
            <span class="num">{{ oInfo.workYears }}</span>
            <span class="line">/</span>
            <span>预约人数</span>
            <span class="num">{{ oInfo.initAppointmentCnt }}</span>
            <span class="line">/</span>
            <span>点评人数</span>
            <span class="num">{{ commentsList.length }}</span>
          </div>
          <!-- 预约、点评、医生人数 end -->

          <!-- 专业擅长 开始 -->
          <div class="skill_box">
            <img src="@/assets/images/doctor/skill.png" class="img" alt="" />
            <span>{{ oInfo.expertProjectNames }}</span>
          </div>
          <!-- 专业擅长 end -->

          <!-- 更多信息 开始 -->
          <div class="more_info">
            <div class="cell">
              <span class="name">营业时间</span>
              <div class="txt" :title="oInfo.businessTime">
                {{ oInfo.businessTime }}
              </div>
            </div>
            <div class="cell">
              <span class="name">所在位置</span>
              <div class="txt">{{ oInfo.hospitalName }}</div>
            </div>
          </div>
          <!-- 更多信息 end -->
        </div>

        <div class="btn_box">
          <!-- <el-button type="primary" class="btn" @click="goBook">免费预约</el-button> -->
          <nuxt-link
            :to="`/appoint?source=doctor&id=${doctorId}&hospitalId=${oInfo.hospitalId}`"
            class="btn"
            >免费预约</nuxt-link
          >
        </div>
      </div>
      <!-- 文字信息 end -->
    </div>
    <!-- 基础信息 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 医生介绍 开始 -->
        <div class="activity_box">
          <TabMenus :list="tabbarList" @change="onTabbarChange" />

          <div class="row_box" ref="tabbar_0">
            <div class="row_head">医生介绍</div>
            <div class="row_content">
              <div class="outpatientIntroduce" v-html="oInfo.introduce"></div>
            </div>
          </div>
        </div>
        <!-- 医生介绍 end -->

        <!-- 用户案例 开始 -->
        <div class="row_box" ref="tabbar_1">
          <div class="row_head">
            <span>用户案例</span>
            <!-- <nuxt-link to="/doctor" class="more">
                            <span>更多</span>
                            <i class="el-icon-arrow-right"></i>
                        </nuxt-link> -->
          </div>
          <div class="row_content">
            <div class="case_list">
              <UserCase
                :key="`case_${index}`"
                v-for="(item, index) in caseList"
                :info="item"
                :alt="`${oInfo.name}口腔医生口腔治疗案例-${item.caseTitle}`"
              />
            </div>
          </div>
        </div>
        <!-- 用户案例 end -->

        <!-- 用户评论 开始 -->
        <div class="row_box" ref="tabbar_2">
          <div class="row_head">
            <span>用户评论</span>
          </div>
          <div class="row_content">
            <UserScore :info="totalScore" :total="commentsList.length" />
            <div class="comment_list">
              <Comment
                v-for="(item, index) in commentsList"
                :key="`comment_${index}`"
                :info="item"
              />
            </div>
          </div>
        </div>
        <!-- 用户评论 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 人气商品 开始 -->
        <div class="problem_box">
          <div class="head">人气商品</div>
          <div class="list_box goods_list">
            <Goods
              v-for="(item, index) in goodsList"
              :key="index"
              :info="item"
            ></Goods>
          </div>
        </div>
        <!-- 人气商品 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import { Rate } from "element-ui";
import TabMenus from "@/components/tabbar/index.vue";
import DetailGoods from "@/components/goods/detail.vue";
import Comment from "@/components/comment/index.vue";
import UserScore from "@/components/comment/score.vue";
import UserCase from "@/components/case/index.vue";
import Goods from "@/components/goods/index.vue";
import {
  GET_DOCTOR_INFO,
  FOLLOWED_DOCTOR_INFO,
  GET_DOCTOR_USERCOMMENTS,
  GET_DOCTOR_USERCASES,
  GET_GOODS_SEARCH,
} from "@/http/interface";
export default {
  components: {
    [Rate.name]: Rate,
    TabMenus,
    DetailGoods,
    Comment,
    UserScore,
    UserCase,
    Goods,
  },
  data() {
    return {
      tabbarList: [
        { name: "医生介绍", id: 0 },
        { name: "用户案例", id: 1 },
        { name: "用户评论", id: 2 },
      ],
      doctorId: "",
      oInfo: {},
      title: "",
      description: "",
      keywords: "",
      //questionList: [],
      //doctorList: [],
      commentsList: [],
      goodsList: [],
      totalScore: {},
      caseList: [],
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/doctor/detail/${this.doctorId}`
                }
      ],
      link: [
        { ref: "canonical", href: `${this.$domain}/doctor/${this.doctorId}` },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_DOCTOR_INFO, {
      params: _params,
    });
    let oInfo = res.data || {};

    // 社区问答
    // let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
    // let qbj = qes.data || {}
    // let questionList = qbj.list || []

    // 医生团队
    // let des = await $axios.get(GET_HOSPITAL_DOCTORS, { params: params });
    // let doctorList = des.data || [];

    // 用户评价
    let comes = await $axios.get(GET_DOCTOR_USERCOMMENTS, { params, _params });
    let obj = comes.data || {};
    let commentsList = obj.list || [];
    let totalScore = obj.summary || {};

    // 案例
    let ces = await $axios.get(GET_DOCTOR_USERCASES, { params: _params });
    let caseList = ces.data || [];

    // 获取商品
    let ges = await $axios.get(GET_GOODS_SEARCH, {
      params: { pageNumber: 1, pageSize: 5 },
    });
    let gobj = ges.data || {};
    let goodsList = gobj.list || [];

    return {
      oInfo,
      doctorId: params.id,
      // appointment,
      // hospital,
      // surroundings,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
      //questionList,
      goodsList,
      //doctorList,
      caseList,
      commentsList,
      totalScore,
    };
  },
  mounted() {},
  methods: {
    // 监听菜单点击
    onTabbarChange(e) {
      let _dom = this.$refs["tabbar_" + e];
      if (_dom) {
        _dom.scrollIntoView();
      }
    },

    // 关注
    async attention() {
      let token = this.$cookies.get("token");
      if (!token) {
        this.$router.push({
          path: "/login",
        });
        return false;
      }
      let _status = this.oInfo.followedStatus;
      let id = this.oInfo.id;
      let params = { id: id };
      let res = await this.$axios.get(FOLLOWED_DOCTOR_INFO, { params: params });
      if (res.code == 200) {
        this.$set(this.oInfo, "followedStatus", _status == 1 ? 2 : 1);
      }
    },

    // 去预约
    goBook() {
      let params = {};
      params.id = this.doctorId;
      params.source = "doctor";
      params.hospitalId = this.oInfo.hospitalId;
      this.$routerPush("/appoint", params);
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/doctor/detail.less";
</style>